<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本框验证</title>
    <style>
        body {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1 align="center">个人简历</h1>
    <form id="resumeForm" action="./js提交跳转.html" method="post">
        <table align="center" border="1" width="600px" background="./35a9b55cfcb6b79f643679f8d12df8276828ff0a7a045-FYwJsd_fw658.webp">
            <tr height="70px">
                <td align="center" width="100px">姓名：</td>
                <td><input type="text" placeholder="必填项" required></td>
                <td rowspan="2" width="100px">
                    <input type="file" id="photoInput" accept="image/*">
                    <br>
                    <img id="photoPreview" src="./js.jpeg" alt="照片预览" style="max-width: 100px; max-height: 150px; display: block; margin: 10px auto;">
                </td>
            </tr>
            <tr height="70px">
                <td align="center">性别：</td>
                <td>
                    <input type="radio" name="gender" checked>女
                    <input type="radio" name="gender">男
                </td>
            </tr>
            <tr>
                <td>年龄</td>
                <td colspan="2"><input type="number" id="ageInput" min="0" required></td>
            </tr>
            <tr>
                <td align="center">新增技能点</td>
                <td colspan="2">
                    <textarea id="textArea" placeholder="在这里输入长文本..."></textarea>
                    <div class="anniu0">
                        <button id="saveButton">保存txt</button>
                    </div>
                </td>
            </tr>
            <tr align="center" height="70px">
                <td colspan="3"><input type="submit" id="submitButton" title="提交"> <input type="reset" id="resetButton" title="重置"></td>
            </tr>
        </table>
    </form>
    <script>
        document.getElementById('saveButton').addEventListener('click', function() {
            const text = document.getElementById('textArea').value;
            const blob = new Blob([text], { type: 'text/plain' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = '技能点.txt';
            link.click();
            URL.revokeObjectURL(link.href);
        });

        document.getElementById('submitButton').addEventListener('click', function(event) {
            event.preventDefault();
            const age = parseInt(document.getElementById('ageInput').value, 10);
            if (isNaN(age) || age < 0) {
                alert('请输入有效的年龄');
                return;
            }
            let ageMessage = '';
            if (age < 18) {
                ageMessage = '18岁以下是未成年，不能提交';
                alert(ageMessage);
                return;
            } else if (age >= 18 && age <= 25) {
                ageMessage = '18-25岁是青少年';
            } else if (age >= 26 && age <= 30) {
                ageMessage = '25-30岁是青年';
            } else if (age >= 31 && age <= 50) {
                ageMessage = '30-50岁是中年';
            } else {
                ageMessage = '50岁以上是中老年';
            }
            alert('可以报考提示\n' + ageMessage);
            alert('提交成功');
            document.getElementById('resumeForm').submit();
        });

        document.getElementById('resetButton').addEventListener('click', function() {
            document.getElementById('ageInput').value = '';
            document.getElementById('photoInput').value = '';
            document.getElementById('photoPreview').src = '';
        });

        // 页面加载时弹出欢迎信息
        window.onload = function() {
            alert("欢迎！");
            prompt('请输入名字', '例如：张三');
        };
    </script>
</body>
</html>